<template  id="section-tree-low">
  <div>
    <el-tree
             style="max-width: 600px"
             node-key="id"
             :data="data"
             :props="defaultProps"
             accordion
             @node-click="handleNodeClick"
    >
    <span slot-scope="{ node, data }">
      <span>{{node.label}}</span>
      <el-button  v-if="data.sectionContent && data.sectionContent != ''"
                  type="text"
                  size="mini"
                  @click="preview(data)">
           查看详述
        </el-button>
    </span>
    </el-tree>

  </div>

</template>

<script>

import sectiontree from '@/api/sectiontree.js'
export default {
  name: 'SectionTreeLow',
  data() {
    return {
      data: [],
      editDrawerDisplay: false,
      drawerWidth: '80%',
      editingSectionId: null,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    };
  },
  mounted() {
    this.fetchSectionTree()
  },
  methods: {
    fetchSectionTree() {
        sectiontree.fetchSectionTree().then(resp => {
          this.data = resp.data
        }).catch(error => {
            console.log(error);
        });
    },
    handleNodeClick(data) {
      if (data.parentId === null) {
        this.$emit('lv1Clk', data);
      }
    },
    preview(data) {
      this.$emit('preview', data.sectionContent, data.label);
    },
  }
};
</script>


